<!-- 加盟商列表选择组件 -->
<template>
    <div>
        <el-select v-model="selectedValue" filterable clearable placeholder="选择加盟商" @change="change" @clear="clear">
            <el-option
                v-for="item in selectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
        </el-select>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: [Number, String, Array],
                default: null
            },
            firstSelect:{
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                selectList: [],
                selectedValue: this.value // 使用本地 data 属性来保存选中的值
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(newVal) {
                    this.selectedValue = newVal; // 监听外部变化以保持同步
                }
            }
        },
        mounted() {
            this.getselectList()
        },
        methods: {
            getselectList(){
                this.$axios.post('/Franchise/List',{
                    pageIndex: 1,
                    pageSize: 9999,
                }).then((res) => {
                    this.selectList = res.rows;
                    if(this.selectList.length > 0 && this.firstSelect){
                        this.$emit('change', this.selectList[0].id)
                    }
                }).catch((err) => {
                    
                })
            },
            clear(){
                this.change()
            },
            change(){
                this.$emit('change', this.selectedValue); // 触发 change 事件传递新值
                this.$emit('input', this.selectedValue); // 如果支持 v-model，则也触发 input 事件
            }
        }
    }
</script>